import React, { useState } from 'react';
import './index.less';
import { useParams } from 'react-router-dom';
import { Button } from 'antd-mobile';
import Title from '../../components/title';
import { getNumberList } from '../../utils/util';
import Daletou from './daletou';

export interface ListItemSelf {
  qianList: any;
  qianColor: string;
  houList: any;
  houColor: string;
}
function DaletouDemo() {
  const routeParams: any = useParams();
  const routeTitle = routeParams.title;
  const demoList: ListItemSelf[] = [];
  const [list, setList] = useState(demoList);

  function getRandomDaletou() {
    const newList = [...list];
    newList.push({
      qianList: getNumberList(1, 35, 5),
      qianColor: '#208fff',
      houList: getNumberList(1, 12, 2),
      houColor: '#f80011',
    });
    setList(newList);
  }
  function getTenRandomDaletou() {
    const newList = [];
    for (let i = 0; i < 10; i++) {
      newList.push({
        qianList: getNumberList(1, 35, 5),
        qianColor: '#208fff',
        houList: getNumberList(1, 12, 2),
        houColor: '#f80011',
      });
      setList(newList);
    }
  }
  function clearList() {
    setList([]);
  }

  return (
    <div className='daletou'>
      <Title title={routeTitle} left={true} />
      <Daletou list={list} />
      <Button color='primary' onClick={() => getRandomDaletou()}>随机一串大乐透号码</Button>
      <Button color='primary' onClick={() => getTenRandomDaletou()}>随机10串大乐透号码</Button>
      <Button color='primary' onClick={() => clearList()}>清空</Button>
    </div>
  );
}
export default DaletouDemo;
